<template>
  <div class="hx-img-fixed" :class="{ 'pin-show': imgSwitch }" >

    <span class="hx-close" @click.stop="closeBigImg"></span>
    <div class="hx-img-big" >

      <div class="hx-img-wrapper">
        <img :src="imgBigUrl" id="myImage" class=""
             :class="{'big-card-img' : isIdentityCard,  'rotate0':isAntiClock0,'rotate90':isAntiClock90,'rotate180':isAntiClock180, 'rotate-90':isClock}">
        <div>
            <span class="hx-preImg hx-img-common extend200" @click="preImg()"
                  :class='{"hx-display-none":currentIndex == -1 || currentIndex == 0}'></span>
            <span class="hx-nextImg hx-img-common extend200" @click="nextImg()"
                  :class='{"hx-display-none":currentIndex == -1 || currentIndex == photoList.length - 1}'></span>
        </div>
        <!--<div class="hx-footer" :class="{'footer-opacity':useOpacity}">-->
          <!--<span class="hx-footer-magnify" @click.stop="magnifyImg"></span>-->
          <!--<span class="hx-footer-reduce" @click.stop="reduceImg"></span>-->
          <!--<span class="hx-footer-anticlockwise" @click.stop="anticlockwise"></span>-->
          <!--<span class="hx-footer-clockwise" @click.stop="clockwise"></span>-->
          <!--<span class="hx-footer-close" @click.stop="closeBigImg"></span>-->
        <!--</div>-->
      </div>
    </div>
  </div>
</template>
<script>
  const WIDTH = 550;
  const HEIGHT = 550;
  const MAX_WIDTH = 550;
  const MAX_HEIGHT = 550;
  export default {
    props: {
      value: {
        type: Boolean,
        default: true
      },
      imgIndex:{
        type: Number,
        default: -1
      },
      photoList:{
        type: Array,
        default: []
      },
      isRectangle:{
        type: Boolean,
        default: false
      }
    },
    computed: {

    },
    watch: {
      'value':function(val){
        this.imgSwitch=val;
        //点击证件图片放大
        if(val&&this.photoList.length>0){
          this.imgBigUrl=this.photoList[this.imgIndex].fileUrl;
          this.rotateNum = 0;
          this.isAntiClock90 = false;
          this.isAntiClock180 = false;
          this.isClock = false;
          this.isAntiClock0 = true;
          this.resetImage({width: WIDTH, height: HEIGHT});
        }
      },
      'imgIndex':function (val) {
        console.log(this.currentIndex)
        this.currentIndex=val;
      },
      'isRectangle':function(val){
          this.isIdentityCard = val;
      }

    },
    methods: {

      //上一张
      preImg() {
        this.useOpacity = false;
        this.rotateNum = 0;
        this.isAntiClock90 = false;
        this.isAntiClock180 = false;
        this.isClock = false;
        this.isAntiClock0 = true;
        if (this.currentIndex != -1 && this.currentIndex != 0) {
          this.currentIndex--;
        }
        console.log(this.currentIndex)
        console.log(this.photoList)
        this.imgBigUrl = this.photoList[this.currentIndex].fileUrl;
        this.resetImage({width: WIDTH, height: HEIGHT});
//        this.update();
      },
      //下一张
      nextImg() {
        this.useOpacity = false;
        this.rotateNum = 0;
        this.isAntiClock90 = false;
        this.isAntiClock180 = false;
        this.isClock = false;
        this.isAntiClock0 = true;
        this.isIdentityCard = false;
        if (this.currentIndex != -1 && this.currentIndex != this.photoList.length - 1) {
          this.currentIndex++;
        }

        this.imgBigUrl = this.photoList[this.currentIndex].fileUrl;
        this.resetImage({width: WIDTH, height: HEIGHT});
//        this.update();
      },
      //图片放大
      magnifyImg(){
        this.useOpacity = true;
        var _this = this;
        var img = new Image();
        img.src = this.imgBigUrl;
        img.onload = function () {
          if (document.getElementById('myImage').width * 1.2 >= 1200) {
            return false;
          }

          if ((_this.isAntiClock90 || _this.isClock) && document.getElementById('myImage').width * 1.2 >= MAX_WIDTH) {
            console.log(600);

            document.getElementById('myImage').style.height = _this.currentHeight / _this.currentWidth * MAX_WIDTH + 'px';
            document.getElementById('myImage').height = _this.currentHeight / _this.currentWidth * MAX_WIDTH;
    //        document.getElementById('myImage').style.width = 600 + 'px';
  //          document.getElementById('myImage').width = 600;


            _this.update();
            return false;
          }
          if ((_this.isAntiClock180 || _this.isAntiClock0) && document.getElementById('myImage').height * 1.2 >= MAX_HEIGHT) {
            console.log(600);
            //document.getElementById('myImage').style.width = _this.currentWidth / _this.currentHeight * 600 + 'px';
           // document.getElementById('myImage').width = _this.currentWidth / _this.currentHeight * 600;
            document.getElementById('myImage').style.height = MAX_HEIGHT + 'px';
            document.getElementById('myImage').height = MAX_HEIGHT;
            _this.update();
            return false;
          }

         // document.getElementById('myImage').style.width = _this.currentWidth * 1.2 + 'px';
         // document.getElementById('myImage').style.height = _this.currentHeight * 1.2 + 'px';
//          document.getElementById('myImage').width = _this.currentWidth * 1.2;
          document.getElementById('myImage').height = _this.currentHeight * 1.2;

          _this.update();
        }

      },
      //图片缩小
      reduceImg(){
        this.useOpacity = true;
        var _this = this;
        var img = new Image();
        img.src = this.imgBigUrl;
        img.onload = function () {
          if (document.getElementById('myImage').width / 1.2 < _this.originalWidth) {
            document.getElementById('myImage').style.height = _this.currentHeight / _this.currentWidth * _this.originalWidth + 'px';
            document.getElementById('myImage').height = _this.currentHeight / _this.currentWidth * _this.originalWidth;
            //document.getElementById('myImage').style.width = _this.originalWidth + 'px';
           // document.getElementById('myImage').width = _this.originalWidth;
            _this.useOpacity = false;
          }else{
//            document.getElementById('myImage').style.width = _this.currentWidth / 1.2 + 'px';
            document.getElementById('myImage').style.height = _this.currentHeight / 1.2 + 'px';
            //document.getElementById('myImage').width = _this.currentWidth / 1.2;
            document.getElementById('myImage').height = _this.currentHeight / 1.2;
          }
          _this.update();
        }

      },
      closeBigImg(){
        this.imgSwitch=false;
        this.$emit('input', false);
        this.$emit('reset', false);
      },
      //重置图片大小
      resetImage(data){
        document.getElementById('myImage').style.height = data.height + 'px';
        document.getElementById('myImage').height = data.height;
        this.originalWidth = data.width;
        this.update();
      },
      //保存当前图片尺寸
      update(){
        this.currentWidth = document.getElementById('myImage').width;
        this.currentHeight = document.getElementById('myImage').height;
      },
      // 顺时针旋转
      clockwise(){
        this.rotateNum += 1;
        this.changeDegree();
      },
      // 逆时针旋转
      anticlockwise(){
        this.rotateNum -= 1;
        this.changeDegree();
      },
      //确定旋转角度
      changeDegree(){
        if (this.rotateNum % 4 == 0) {
          this.isAntiClock0 = true;
          this.isAntiClock90 = false;
          this.isAntiClock180 = false;
          this.isClock = false;
        } else if (this.rotateNum % 4 == 1 || this.rotateNum % 4 == -3) {
          this.isAntiClock90 = true;
          this.isAntiClock0 = false;
          this.isAntiClock180 = false;
          this.isClock = false;
        } else if (this.rotateNum % 4 == 2 || this.rotateNum % 4 == -2) {
          this.isAntiClock180 = true;
          this.isAntiClock0 = false;
          this.isAntiClock90 = false;
          this.isClock = false;
        } else if (this.rotateNum % 4 == 3 || this.rotateNum % 4 == -1) {
          this.isClock = true;
          this.isAntiClock0 = false;
          this.isAntiClock90 = false;
          this.isAntiClock180 = false;
        }
      }
  },
  data() {
    return {
      isIdentityCard:false,
      currentIndex:this.imgIndex,
      imgSwitch: this.value,
      imgBigUrl:'',
      currentWidth:0,
      currentHeight:0,
      originalWidth:0,
      originalHeight: 0,
      useOpacity:true,
      isAntiClock0: false,
      isAntiClock90: false,
      isAntiClock180: false,
      isClock: false,
      rotateNum: 0,           //（等同于）顺时针旋转次数
    }
  }
  };
</script>
<style>
  /*证件图片放大*/
  .hx-img-fixed {
    position: fixed;
    display: none;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1002;
    background:rgba(0,0,0,0.50);

  }

  .hx-img-big {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 700px;
    -moz-transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform: translateY(-50%);

  }
  .hx-img-big img{
    position: absolute;
    height: 345px;
    top: 50%;
    left: 50%;
    -moz-transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
    transform: translate(-50%,-50%);
  }

  .big-card-img{
    background-size: 550px 345px;
  }

  .pin-show {
    display: block!important;
  }

  .hx-img-big .hx-img-wrapper{
    position: relative;
    width: 100%;
    height: 100%;
    z-index:100;
    overflow: auto;
  }

  .hx-img-big .hx-top{
    width: 670px;
    height: 40px;
    font-size:20px;
    color:#424754;
    background:#f1f4fb;
    border-radius:2px 2px 0px 0px;
  }

  .hx-img-big .hx-top .hx-top-title{
    line-height: 40px;
    display: inline-block;
    margin-left: 20px;
  }

  .hx-img-big .hx-top .hx-top-close{
    display: inline-block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 10px;
    right: 20px;
    background: url('./img/small-icons.png');
    background-position: -72px -72px;
    cursor:pointer;
  }

  .hx-img-big .hx-footer{
    background: rgba(255,255,255,0.90);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.10);
    border-radius: 100px;
    width: 402px;
    height: 50px;
    position: absolute;
    bottom: 25px;
    margin-left: 50%;
    -moz-transform:translate(-50%,0);
    -webkit-transform:translate(-50%,0);
    -o-transform:translate(-50%,0);
    transform: translate(-50%,0);
  }
  .hx-img-big .hx-footer .hx-footer-magnify{
    position: absolute;
    top: 14px;
    left: 50px;
    background-image:url("./img/magnify.png");
    border-radius:2px;
    width:22px;
    height:22px;
    display: inline-block;
    cursor:pointer;
  }
  .hx-img-big .hx-footer .hx-footer-reduce{
    position: absolute;
    top: 14px;
    left: 102px;
    background-image:url("./img/reduce.png");
    border-radius:2px;
    width:22px;
    height:22px;
    display: inline-block;
    cursor:pointer;
  }
  .hx-img-big .hx-footer .hx-footer-anticlockwise{
    position: absolute;
    top: 14px;
    left: 187px;
    background-image:url("./img/anticlockwise.png");
    border-radius:2px;
    width:25px;
    height:22px;
    display: inline-block;
    cursor:pointer;
  }
  .hx-img-big .hx-footer .hx-footer-clockwise{
    position: absolute;
    top: 14px;
    left: 242px;
    background-image:url("./img/clockwise.png");
    border-radius:2px;
    width:25px;
    height:22px;
    display: inline-block;
    cursor:pointer;
  }
  .hx-img-big .hx-footer .hx-footer-close{
    position: absolute;
    top: 14px;
    right: 50px;
    background-image:url("./img/close.png");
    border-radius:2px;
    width:22px;
    height:22px;
    display: inline-block;
    cursor:pointer;
  }
  .hx-img-big .hx-footer.footer-opacity{
    opacity : 0.1;
  }
  .hx-img-big .hx-footer.footer-opacity:hover{
    opacity : 1;
  }
  .hx-img-wrapper .hx-img-common{
    display: inline-block;
    width:15px;
    height:30px;
    background: url('./img/small-icons.png');
    position: absolute;
    top: 253px;
    cursor:pointer;
  }
  .hx-img-wrapper .hx-preImg{
    background: url('./img/previous.png');
    width:62px;
    height:62px;
    left: 10%;
  }

  .hx-img-wrapper .hx-nextImg{
    background: url('./img/next.png');
    width:62px;
    height:62px;
    right: 10%;
  }
  .hx-display-none{
    display: none !important;
  }





  .extend200 {
    position: relative
  }

  .extend200::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
  }
  /*图片旋转*/
  .hx-img-wrapper img.rotate0{
    -moz-transform:rotate(0deg) translate(-50%,-50%);
    -webkit-transform:rotate(0deg) translate(-50%,-50%);
    -o-transform:rotate(0deg) translate(-50%,-50%);
    transform:rotate(0deg) translate(-50%,-50%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  }
  .hx-img-wrapper img.rotate90{
    -moz-transform:rotate(90deg) translate(-50%,50%);
    -webkit-transform:rotate(90deg) translate(-50%,50%);
    -o-transform:rotate(90deg) translate(-50%,50%);
    transform:rotate(90deg) translate(-50%,50%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  }
  .hx-img-wrapper img.big-card-img.rotate90{
    -moz-transform:rotate(90deg) translate(-33%,78%);
    -webkit-transform:rotate(90deg) translate(-33%,78%);
    -o-transform:rotate(90deg) translate(-33%,78%);
    transform:rotate(90deg) translate(-33%,78%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  }
  .hx-img-wrapper img.rotate180{
    -moz-transform:rotate(180deg) translate(50%,50%);
    -webkit-transform:rotate(180deg) translate(50%,50%);
    -o-transform:rotate(180deg) translate(50%,50%);
    transform:rotate(180deg) translate(50%,50%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  }
  .hx-img-wrapper img.rotate-90{
    -moz-transform:rotate(-90deg) translate(50%,-50%);
    -webkit-transform:rotate(-90deg) translate(50%,-50%);
    -o-transform:rotate(-90deg) translate(50%,-50%);
    transform:rotate(-90deg) translate(50%,-50%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  }
  .hx-img-wrapper img.big-card-img.rotate-90{
    -moz-transform:rotate(-90deg) translate(33%,-78%);
    -webkit-transform:rotate(-90deg) translate(33%,-78%);
    -o-transform:rotate(-90deg) translate(33%,-78%);
    transform:rotate(-90deg) translate(33%,-78%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  }
  /*临时*/
  .hx-close{
    position: absolute;
    top:50px;
    right:50px;
    background:#fff url("./img/close.png") 50% 50% no-repeat;
    width:30px;
    height:30px;
    display: inline-block;
    cursor:pointer;
    border-radius: 100%;
    z-index:101
  }
  .hx-close:hover{
    cursor:pointer;
  }


</style>
